<template>
  <div class="main-content" style="width: 60%">
    <div class="card">
      <div style="display: flex; grid-gap: 20px;">
        <img :src="activity.img" alt="" style="width: 50%">
        <div style="flex: 1">
          <div style="font-size: 22px; margin-bottom: 40px">{{ activity.activityName }}</div>
          <div class="item"><span style="color: #333">活动日期：</span>{{ customFormatterData(activity.startDate) }} ~ {{
            customFormatterData(activity.endDate) }}</div>
          <div class="item"><span style="color: #333">活动地址：</span>{{ activity.address }}</div>
          <div>
            <span style="margin-right: 10px;" v-if="signFlag">
              <el-button size="small" type="primary" disabled key="sign">已报名</el-button>
            </span>
            <span v-else style="margin-right: 10px;">
              <el-button @click="handleUserSign" size="small" type="primary"
                v-if="Date.now() < activity.startDate">用户报名</el-button>
              <el-button @click="handleSign" size="small" type="primary"
                v-if="Date.now() < activity.startDate">志愿者报名</el-button>
            </span>

            <el-button size="small" type="primary"
              v-if="Date.now() > activity.startDate && Date.now() < activity.endDate" disabled
              key="notstart">活动进行中...</el-button>
            <el-button size="small" type="primary" v-if="Date.now() < activity.startDate" disabled
              key="notstart">活动未开始</el-button>
            <el-button size="small" type="primary" v-if="Date.now() > activity.endDate" disabled
              key="notend">活动已结束</el-button>
          </div>
        </div>
      </div>

      <div style="margin: 50px 0">
        <div style="margin-bottom: 30px; font-size: 22px; font-weight: bold; text-align: center">- 活动详情 -</div>
        <div class="w-e-text" style="line-height: 26px">
          <div v-html="activity.details"></div>
        </div>
      </div>
    </div>


    <el-dialog center title="报名信息" :visible.sync="fromVisible" width="40%" :close-on-click-modal="false"
      destroy-on-close>
      <div>
        <p>志愿者要求：</p>
        <p>1．遵守国家法律法规和志愿服务工作相关规定，无违法犯罪记录；</p>
        <p>2．年满18周岁，具有完全民事行为能力；限制民事行为能力人，须经其监护人同意。</p>
        <p>3．自愿参与志愿服务，服务期间能够保证相对固定的服务时间；</p>
        <p>4．具备开展志愿服务所需要的身体条件和健康素质；</p>
        <p>5．具备志愿服务岗位所需要的基础知识和基本技能；</p>
        <p>6．具备岗位所需沟通合作的能力和尊重服务对象的意识。</p>
        <p>上岗须知：</p>
        <p>1．遵守上岗要求：做到仪表整洁、举止得体、文明礼貌，认真履行岗位职责，严肃工作纪律，不得无故迟到、早退、擅自离岗、随意请假等；</p>
        <p>2．积极配合工作：服从岗位安排和调配，服从相关组织方及负责人的管理；严格遵守保密纪律，不以志愿者身份或者志愿服务名义从事任何以营利为目的或者违背社会公德的活动；</p>
        <p>3．做好自我保护：增强自我保护意识和安全防范意识，注意保护个人人身及财务安全，遇到突发事件应及时上报。</p>
        <p>4．按时签到签退：到达服务现场后，请及时在“青聚锦官城·城市志愿者”平台签到，活动完成后按时签退。如未按照时间、地点要求签到签退，系统将无法补签。</p>
        <p>服务说明</p>
        <p>
          志愿5名，按照规定时间签到集合，13：30进行志愿者分工和安全注意事项培训。13：30-14：30协助工作人员布置生日会现场氛围，如礼品包装、生日气球装饰物营造。15：00，2未位志愿者负责现场签到，1位志愿者引导新就业工作人员入场，1位志愿者引导参会人员电瓶车文明停放，1位志愿者负责现场拍照。活动开始后签到处志愿者协助主持人维护游戏环节秩序，引导处志愿者负责礼品的颁发与存放看管。活动结束后志愿者协助整理复原场地，拍摄服务合影纪念照。
        </p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="fromVisible = false">取 消</el-button>
        <el-button type="primary" v-if="loadNumber != 0" disabled>{{ loadNumber }} 报名</el-button>
        <el-button type="primary" v-else @click="sign">报名</el-button>
      </div>
    </el-dialog>
    {{ userActivityRegList }} <br><br>
    {{ volunteerActivityRegList }}
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import { customFormatterData } from '@/utils/dateTimeFormatter'
import { message, messageType } from '@/utils/message';
import { userActivityRegService, volunteerActivityRegService } from '@/api/front/common';
export default {
  name: "ActivityDetail",
  data() {
    return {
      id: this.$route.query.id,
      fromVisible: false,
      regForm: {
        activityId: ''
      },
      rules: {
        phone: [
          { required: true, message: '手机号必填', trigger: 'blur' }
        ]
      },
      num: 10,
      intervalId: null,
      signFlag: false,
    }
  },
  created() {
    this.userActivityByIdActions(this.id);
    this.userActivityByUserIdActions();
    this.volunteerActivityByUserIdActions();
    this.isSign();
  },
  computed: {
    ...mapState('userActivity', ['activity', 'userActivityRegList', 'volunteerActivityRegList']),
    loadNumber() {
      return this.num;
    },
  },
  methods: {
    customFormatterData,
    ...mapActions('userActivity', ['userActivityByIdActions', 'userActivityByUserIdActions', 'volunteerActivityByUserIdActions']),
    isSign() {
      let userActivityRegArray = [...this.userActivityRegList];
      if (userActivityRegArray) {
        userActivityRegArray.forEach((item) => {
          if (item.activityId == this.id) {
            console.log('11--', item);
            this.signFlag = true;
          }
        })
      }

      let volunteerActivityRegArray = [...this.volunteerActivityRegList];
      if (volunteerActivityRegArray) {
        volunteerActivityRegArray.forEach((item) => {
          if (item.activityId == this.id) {
            console.log('11--', item);
            this.signFlag = true;
          }
        })
      }
    },
    sign() {
      this.regForm.activityId = this.id;
      volunteerActivityRegService(this.regForm).then(resp => {
        if (!resp) return;
        console.log(resp);
        message(messageType().success, "报名成功");
        setTimeout(() => {
          this.fromVisible = false;
          this.$router.push('/front/activityDetail?id=' + this.id)
        }, 500);
      }, error => {
        console.log(error);
      }
      )
    },
    handleUserSign() {
      this.regForm.activityId = this.id;
      this.$confirm('是否报名该活动?', '用户报名', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        userActivityRegService(this.regForm).then(resp => {
          if (!resp) return;
          console.log(resp);
        })
        setTimeout(() => {
          message(messageType().success, "报名成功");
          this.$router.push('/front/activityDetail?id=' + this.id)
        }, 500);

      }).catch(() => {
        message(messageType().info, "取消了");
      });
    },
    handleSign() {

      this.regForm.activityId = this.id
      this.fromVisible = true

      this.intervalId = setInterval(() => {
        if (this.num > 0) {
          this.num--;
        } else {
          clearInterval(this.intervalId);
          // 可以在这里添加倒计时结束后的逻辑
          // 比如显示一个消息或执行某个函数
        }
      }, 1000); // 每秒执行一次
    },
  }
}
</script>

<style scoped>
.item {
  color: #666;
  margin-bottom: 40px
}
</style>